<%@ taglib prefix='c' uri='http://java.sun.com/jstl/core' %>
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>User Secure Home Page</title>
        <link rel="stylesheet" href="../js/dijit/themes/claro/claro.css" media="screen">
        
        <style type="text/css">
		@import "../js/dojo/resources/dojo.css";
		@import "../js/dojox/grid/resources/Grid.css";
		@import "../js/dojox/grid/resources/claroGrid.css";
		.grid {
			width: 70em;
			height: 15em;
		}
		</style>
        
		<script>
			var dojoConfig = {
			    baseUrl: "../js/",
			    tlmSiblingOfDojo: false,
			    packages: [
			        { name: "dojo", location: "../js/dojo" },
			        { name: "dijit", location: "../js/dijit" },
			        { name: "dojox", location: "../js/dojox" },
			        { name: "my", location: "../js/my"}
			    ]
			};
		</script>
		
		<script src="../js/dojo/dojo.js"data-dojo-config="async:true, parseOnLoad:true"></script>
		
		<script type="text/javascript">	require(["dijit/layout/BorderContainer", "dijit/form/Button", "dijit/layout/ContentPane", 
		                               	         "dojo/parser", "dojo/ready", "dijit/form/Form", 
												 "my/dialog/EditUserDialog", "my/form/EditUserForm",
												 "my/dialog/TransferDialog", "my/form/TransferForm",
												 "my/dialog/HistoryGridDialog","my/grid/HistoryGrid",
												 "my/dialog/InnerTransferDialog", "my/form/InnerTransferForm",
		                               	      	 "my/form/Base"]);
		</script>

		<style type="text/css">
			html, body {
			    height: 100%;
			    margin: 0;
			    overflow: hidden;
			    padding: 0;
			}
			#appLayout {
			    height: 100%;
			}
			#leftCol {
			    width: 14em;
			    background-color: #BFEFFF;
			}
		</style>
		
    </head>
    <body class="claro">
    <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
        <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'"></div>
        <div class="edgePanel" style="background-color: #BFEFFF; text-align: right" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">Context: 
        	<label id="contextLabel"></label>
        </div>
        <div id="leftCol" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true">Navigator
        	<p>Select action from navigation menu</p>
        	<table data-dojo-type="my.form.Base">
        		<tr><td>
					<button id="transferButton" data-dojo-type="dijit.form.Button" type="button">Transfer
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("transferDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr><td>
					<button id="innerTransferButton" data-dojo-type="dijit.form.Button" type="button">Inner Transfer
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("innerTransferDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr><td>
					<button id="historyGridButton" data-dojo-type="dijit.form.Button" type="button">History
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("historyGridDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr><td>
					<button id="editUserButton" data-dojo-type="dijit.form.Button" type="button">Manage account
				    	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
        					dijit.byId("editUserDialog").show();
   	 					</script>
					</button>
				</td></tr>
				<tr><td>
					<button id="logoutButton" data-dojo-type="dijit.form.Button" type="button">Logout
				    	<script type="dojo/connect" data-dojo-event="onClick">
    						window.location = "/Perseus/j_spring_security_logout";
  						</script>
					</button>
				</td></tr>
			</table>
        </div>
    </div>
    
    <div id="editUserDialog" data-dojo-type="my.dialog.EditUserDialog" title="Manage account" style="width: 350px; height: 500px;"></div>
	<div id="transferDialog" data-dojo-type="my.dialog.TransferDialog" title="Transfer" style="width: 350px; height: 500px;"></div>
	<div id="innerTransferDialog" data-dojo-type="my.dialog.InnerTransferDialog" title="Inner Transfer" style="width: 350px; height: 500px;"></div>
    <div id="historyGridDialog" data-dojo-type="my.dialog.HistoryGridDialog" title="History" style="width: 900px; height: 700px;"></div>
    
</body>
</html>